﻿<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <link rel="stylesheet" type="text/css" href="/style/admin/login/css/styles.css">
</head>
<style>
    .wrapper{
        height: 100vh;
    }
    .input-group {
        display: flex;
        width: 250px;
        margin: 0 auto;
    }

    #code {
        flex: 4;
        min-width: 120px;
    }

    .send-btn {
        flex: 4;
        line-height: 42px;
        cursor: pointer;
    }

    .send-btn-disable {
        display: none;
        flex: 4;
        line-height: 42px;
        cursor: pointer;
    }
</style>
<body>
<div class="htmleaf-container">
    <div class="wrapper">
        <div class="container">
            <h1 id="message">Welcome</h1>

            <form class="form" id="loginBox">
                {!! csrf_field() !!}
                <input type="text" id="username" name="username" placeholder="手机号">
                <input type="password" id="password" name="password" placeholder="密码">
                <div class="input-group">
                    <input type="text" id="code" name="code" placeholder="验证码">
                    <div class="send-btn">发送验证码</div>
                    <div class="send-btn-disable">重新发送(60)</div>
                </div>
                <button type="submit" id="login-button">Login</button>
            </form>
        </div>

        <ul class="bg-bubbles">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</div>

<script src="/style/admin/login/js/jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="/style/admin/login/js/slide.js" type="text/javascript"></script>
<script>
    $(document).ready(function () {

        //发送验证码
        $('.send-btn').click(function () {
            var mobile = $('#username').val();

            if (!mobile) {
                $('#message').text('请填写手机号');
                return false;
            }
            //切换发送按钮为不可点击状态
            $('.send-btn').hide();
            $('.send-btn-disable').show();
            var time = 59;
            var conut_down = window.setInterval(function () {
                if(time<0){
                    clearInterval(conut_down);
                    $('.send-btn').show();
                    $('.send-btn-disable').hide();
                    $('.send-btn-disable').text('60');
                }
                $('.send-btn-disable').text('重新发送('+time+')');
                time--;

            },1000);

            $.ajax({
                url: '/api/common/send_sms',
                headers: {
                    Accept: "application/x.huaapi.v1+json"
                },
                type: 'post',
                data: {
                    mobile: mobile,
                    scene:2
                },
                success(data) {
                    console.log(data);
                    if (data.status == 1) {

                    } else {
                        $('.send-btn').show();
                        $('.send-btn-disable').hide();
                    }
                },
                complete(data){
                    res = data.responseJSON;
                    if (res.status == 1) {

                    } else {
                        $('.send-btn').show();
                        $('.send-btn-disable').hide();
                    }
                }
            })
        })

        //隐藏滚动条

        $(document.body).css({
            "overflow-x": "hidden",
            "overflow-y": "hidden"
        });

        //滑动验证


        $('#login-button').click(function (event) {

            event.preventDefault();

            //判断滑动验证


            //隐藏表单区域

            $('form').fadeOut(500);
            $('.wrapper').addClass('form-success');

            //ajax登录
            $.ajax({
                url: '/pc/login',
                type: 'POST',
                data: {
                    "username": $('#username').val(),
                    "password": $('#password').val(),
                    "code": $('#code').val(),
                    '_token': '{{csrf_token()}}'
                },
                success: function (data) {
                    if (data['status']) {
                        var store_id = data.data.store_id;
                        $("#message").text(data['message']);
                        window.location.href = '/pc/index/'+store_id;
                    } else {
                        $("#message").text(data['message']);
                        $('form').fadeIn(500);
                        $('.wrapper').removeClass('form-success');

                    }
                },
                beforeSend: function () {
                    $("#message").text('请稍后');
                }


            })


        });


    })
</script>

</body>
</html>